<template>
    <div class="main-container">
        <div class="main-header">
            <div class="main-header-function">
                <div>
                    <label>变量列表</label>
                </div>
                <div>
                    <el-button
                            type="primary"
                            size="medium"
                            icon="el-icon-circle-plus-outline"
                            @click="addVariableEvent"
                    >添加变量</el-button>
                </div>
            </div>
        </div>

        <div class="main-body">
            <el-table
                    border
                    fit
                    highlight-current-row
                    :data="table.variables"
            >
                <el-table-column
                        prop="name"
                        width="160"
                        label="变量名称">
                </el-table-column>
                <el-table-column
                        prop="value"
                        label="变量值">
                </el-table-column>
                <el-table-column
                        prop="desc"
                        width="260"
                        label="描述">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="editVariableEvent(scope.row)"
                                type="text">
                            <strong style="color: blue" >编辑</strong>
                        </el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button
                                @click.native.prevent="deleteVariableEvent(scope.row)"
                                type="text">
                            <strong style="color: red" >删除</strong>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="dialog.title"
                   :close-on-click-modal="false"
                   :visible.sync="dialog.visible">
            <el-form :model="dialog.formData"
                     :rules="dialog.rules"
                     label-position="left"
                     :ref="dialog.formRef"
                     label-width="100px">
                <el-form-item label="变量名称" prop="name">
                    <el-input v-model="dialog.formData.name" autocomplete="off" :disabled="dialog.type == 2"></el-input>
                </el-form-item>
                <el-form-item label="变量值" prop="value">
                    <el-input v-model="dialog.formData.value" type="textarea" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="变量描述" prop="desc">
                    <el-input v-model="dialog.formData.desc" type="textarea" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="submitVariableForm()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import tools from "@/util/Tools";

    export default {
        name: "variable",
        data() {
            return {
                table: {
                    variables: []
                },
                dialog: {
                    title: "",
                    visible: false,
                    type: 0,    // 1 表示添加, 2 表示编辑
                    formRef: "variablesDataForm",
                    formData: {
                        id: "",
                        name: "",
                        desc: ""
                    },
                    rules: {
                        name: [
                            {required: true, message: "请输入变量名称", trigger: "blur"},
                        ],
                        value: [
                            {required: true, message: "请输入变量值", trigger: "blur"},
                        ],
                    }
                },
            }
        },
        methods: {
            /* 查询所有变量数据 */
            findVariables() {
                tools.get("/variable/findAll").then(response => {
                    this.table.variables = response.dataList;
                })
            },

            addVariableEvent() {
                this.dialog.title = "添加变量";
                this.dialog.visible = true;
                this.dialog.type = 1;
                this.dialog.formData = {};
            },

            editVariableEvent(variable) {
                this.dialog.title = "编辑变量";
                this.dialog.visible = true;
                this.dialog.type = 2;
                this.dialog.formData = tools.copy(variable);
            },

            deleteVariableEvent(variable) {
                this.$confirm("是否删除变量", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    tools.delete("/variable/delete", {id: variable.id}).then(response => {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                        // 重新查询列表
                        this.findVariables();
                    })
                }).catch(() => {
                });
            },

            submitVariableForm() {
                this.$refs[this.dialog.formRef].validate((valid) => {
                    if (valid) {
                        let url;
                        let message;
                        if (this.dialog.type == 1) {
                            url = "/variable/add";
                            message = "添加成功";
                        } else if (this.dialog.type == 2) {
                            url = "/variable/edit";
                            message = "编辑成功";
                        }
                        tools.post(url, this.dialog.formData).then(response => {
                            this.$message({
                                type: "success",
                                message: message
                            });
                            this.dialog.visible = false;
                            this.findVariables();
                        });
                    } else {
                        return false;
                    }
                });
            },

        },
        mounted() {
            this.findVariables();
        }
    }
</script>

<style scoped>

</style>
